<template>
<!-- 只有总页数大于1才显示 -->
  <div class="pager-container" v-show="pageNumber > 1">
    <!-- 第一页 -->
    <a @click="pageChange(1)" v-show="current > 1" :class="{ disabled: current === 1 }">|&lt;&lt;</a>
    <!-- 上一页 -->
    <a @click="pageChange(current-1)" :class="{ disabled: current === 1 }">&lt;&lt;</a>

     
    <a @click="pageChange(n)" v-for="(n,i) in numbers" :key="i" :class="{ active: n === current }">{{n}}</a>

    <!-- 下一页 -->
    <a @click="pageChange(current+1)" :class="{ disabled: current === pageNumber }">&gt;&gt;</a>
    <!-- 最后一页 -->
    <a @click="pageChange(pageNumber)" v-show="current !== visibleMax" :class="{ disabled: current === pageNumber }">&gt;&gt;|</a>
  </div>
</template>

<script>
export default {
  props: {
    current: {
      // 当前页码
      type: Number,
      default: 1,
    },
    total: {
      // 总数据量
      type: Number,
      default: 0,
    },
    limit: {
      // 页容量
      type: Number,
      default: 10,
    },
    visibleNumber: {
      // 可见页码数
      type: Number,
      default: 10,
    },
  },
  data: () => ({}),
  computed: {
    pageNumber() {
      // 总页数
      return Math.ceil(this.total / this.limit);
    },
    visibleMin(){ // 显示的最小页码
        let min = this.current - Math.floor( this.visibleNumber/2) 
        min = min < 1 ? 1 : min
        return min
    },
    visibleMax(){ // 显示的最大页码
       let max = this.visibleMin + this.visibleNumber - 1
       max = max > this.pageNumber ? this.pageNumber : max
       return max
    },
    numbers(){
      const reult = []
      for(let i = this.visibleMin; i <= this.visibleMax; i++){
        reult.push(i)
      }
      return reult
    }
  },
  methods: {
    pageChange(i) {
      i = i <=1 ? 1:i
      i = i >=this.visibleMax ? this.visibleMax:i
      console.log(i)
      if(this.current != i){
        this.$emit('pageChange',i)
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/assets/style/var.less";
.pager-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  a {
    color: @primary;
    margin: 0 6px;
    cursor: pointer;
    &.disabled {
      color: @lightWords;
      cursor: not-allowed;
    }
    &.active {
      color: @words;
      font-weight: bold;
      cursor: text;
    }
  }
}
</style>
